<template>
	<div class="etit-after-sale">
		<head-back-title title="添加售后"></head-back-title>
		<el-card>
			<el-form :model="infoForm" ref="infoForm" :rules="infoFormRules" label-width="120px">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="订单商品编号:" prop="rec_id">
							<el-input v-model="infoForm.rec_id" placeholder="请输入订单商品编号" :disabled="isRec">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="9">
						<el-form-item label="售后描述(用户):" prop="content">
							<el-input
							  type="textarea"
							  :rows="3"
							  placeholder="请输入内容"
							  v-model="infoForm.content">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="9">
						<el-form-item label="备注:" prop="brief">
							<el-input
							  type="textarea"
							  :rows="3"
							  placeholder="请输入内容"
							  v-model="infoForm.remarks">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="24">
						<div class="title">
							售后图片上传(多图)
							<el-tag>图片仅限JPG/PNG格式</el-tag>
						</div>
					</el-col>
					<div class="clearfix"></div>
					<div class="case_upload clearfix">
						<el-col :span="18">
							<el-form-item label="上传整体图:" class="upload-box" prop="viceImages">
								<div class="case-img-upload">
									<div class="case-img-upload-btns">
										<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 0); } " multiple accept="image/*" >
											<el-button type="primary" size="small">上传图片</el-button>
										</el-upload>
										<el-button type="danger" size="small" @click="rest(1)">重置</el-button>
										<div class="el-upload__tip">小于500KB</div>
									</div>
									<div class="case-img-upload-imgs">
										<el-image v-if="!viceImages.length"><div slot="error"></div></el-image>
										<div v-for="(data, index) in viceImages" :key="index" class="vice_big_box" v-else>
											<i class="el-icon-error" @click="delVice(index, 1)"></i>
											<el-image :preview-src-list="viceImages" :src="data" fit="contain"></el-image>
										</div>
									</div>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="18">
							<el-form-item label="上传细节图:" class="upload-box" prop="infoImages">
								<div class="case-img-upload">
									<div class="case-img-upload-btns">
										<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 1); } " multiple accept="image/*" > <el-button type="primary" size="small">上传图片</el-button>
										</el-upload>
										<el-button type="danger" size="small" @click="rest(2)">重置</el-button>
										<div class="el-upload__tip">小于500KB</div>
									</div>
									<div class="case-img-upload-imgs">
										<el-image v-if="!infoImages.length"><div slot="error"></div></el-image>
										<div v-for="(data, index) in infoImages" :key="index" class="vice_big_box" v-else>
											<i class="el-icon-error" @click="delVice(index, 2)"></i>
											<el-image :preview-src-list="infoImages" :src="data" fit="contain"></el-image> </div>
									</div>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="18">
							<el-form-item label="上传包装图:" class="upload-box" prop="pageImages">
								<div class="case-img-upload">
									<div class="case-img-upload-btns">
										<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 2); } " multiple accept="image/*" > 
											<el-button type="primary" size="small">上传图片</el-button>
										</el-upload>
										<el-button type="danger" size="small" @click="rest(3)">重置</el-button>
										<div class="el-upload__tip">小于500KB</div>
									</div>
									<div class="case-img-upload-imgs">
										<el-image v-if="!pageImages.length"><div slot="error"></div></el-image>
										<div v-for="(data, index) in pageImages" :key="index" class="vice_big_box" v-else>
											<i class="el-icon-error" @click="delVice(index, 3)"></i>
											<el-image :preview-src-list="pageImages" :src="data" fit="contain"></el-image>
										</div>
									</div>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="18">
							<el-form-item label="上传视频:" class="upload-box">
								<div class="case-img-upload">
									<div class="case-img-upload-btns">
										<el-upload
										ref="upload"
										action="fakeaction"
										:show-file-list="false"
										:http-request="function(res){return upload2(res);}"
										accept="video/mp4,avi"
										>
											<el-button type="primary" size="small">上传视频</el-button>
										</el-upload>
										<el-button type="danger" size="small" @click="rest(4)">重置</el-button>
										<div class="el-upload__tip">视频不能大于100M</div>
									</div>
									<div class="case-img-upload-imgs">
										<el-image v-if="!map4Video.length"><div slot="error"></div></el-image>
										<div v-for="(item,index) in map4Video" :key="index" class="vice_big_box" v-else>
											<i class="el-icon-error" @click="delVice(index,4)"></i>
											<video controls="controls" :src="item" class="avatar"/>
										</div>
									</div>
								</div>
							</el-form-item>
						</el-col>
					</div>
				</el-row>
				<el-button type="primary" @click="submitForm('infoForm')" style="margin-left: 40px;">添加</el-button>
			</el-form>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
		return {
			typeOption:[{
				label:'驳回',
				value:1
			},
			{
				label:'换货',
				value:2
			},
			{
				label:'补件',
				value:3
			},
			{
				label:'维修',
				value:4
			},
			{
				label:'退货',
				value:5
			},
			{
				label:'其他',
				value:6
			}],
			dutyOption:[{
				label:'客户',
				value:1
			},
			{
				label:'总部',
				value:2
			},
			{
				label:'工厂',
				value:3
			},
			{
				label:'物流',
				value:4
			},
			{
				label:'仓库',
				value:5
			}],
			infoForm: {
				rec_id:'',
				type:'',
				duty:'',
				content:'',
				brief:'',
				viceImages:'',
				infoImages:'',
				pageImages:'',
				after_video:'',
				remarks:"",
				// upimg:[
				// 	{
				// 		add_time:"日期",
				// 		name:"售后进度"
				// 	}
				// ]
			},
			infoFormRules: {
				rec_id: [{ required: true, message: '请输入订单商品编号', trigger: 'blur' }],
				type: [{ required: true, message: '请选择售后类型', trigger: 'change' }],
				duty: [{ required: true, message: '请选择责任划分', trigger: 'change' }],
				content: [{ required: true, message: '请输入售后描述', trigger: 'blur' }],
				viceImages: [{ required: true, message: '请上传整体图', trigger: 'blur' }],
				infoImages: [{ required: true, message: '请上传细节图', trigger: 'blur' }],
				pageImages: [{ required: true, message: '请上传包装图', trigger: 'blur' }]
			},
			admin_id: localStorage.getItem('admin_id'),
			viceImages: [],
			infoImages: [],
			pageImages: [],
			map4Video:[],
			isRec:false
		};
	},
	methods: {
		// 图片上传
		upload(params, type) {
			const file = params.file,
				fileType = file.type,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt500KB = file.size / 1024 <= 500;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt500KB) {
				this.$message.error('图片不能大于500K!');
				return;
			}
			const form = new FormData();
			form.append('file[]', file);
			switch (Number(type)) {
				case 0:
					this.$http(this.$ApiList.publicUpload, form).then(res => {
						this.viceImages.push(res.datas[0]);
					});
					break;
				case 1:
					this.$http(this.$ApiList.publicUpload, form).then(res => {
						this.infoImages.push(res.datas[0]);
					});
					break;
				case 2:
					this.$http(this.$ApiList.publicUpload, form).then(res => {
						this.pageImages.push(res.datas[0]);
					});
					break;
			}
		},
		// 重置图片
		rest(type) {
			switch (type) {
				case 1:
					this.viceImages = [];
					break;
				case 2:
					this.infoImages = [];
					break;
				case 3:
					this.pageImages = [];
					break;
				case 4:
					this.map4Video= [];
					break;
			}
		},
		// 删除附图
		delVice(index, type) {
			this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					if(type == 1){
						this.viceImages.splice(index, 1);
					}else if(type == 2){
						this.infoImages.splice(index, 1);
					}else if(type == 3){
						this.pageImages.splice(index, 1);
					}else if(type == 4){
						this.map4Video.splice(index,1)
					}
				})
				.catch(() => {});
		},
		// 视频上传
		upload2(params) {
			const file = params.file,
				fileType = file.type,
				isLt1MB = file.size / 1024 <= 100024;
			if (!isLt1MB) {
				this.$message.error('视频不能大于100M');
				return;
			}
			let formData = new FormData();
			formData.append('file[]', file);
			this.$http(this.$ApiList.UpVideo,formData).then(res=>{
				this.map4Video.push(res.datas);
			})
		},
		//提交
		submitForm(formName) {
			if(this.viceImages.length !=''){
				this.infoForm.viceImages = this.viceImages.join(',')
			}
			if(this.infoImages.length !=''){
				this.infoForm.infoImages = this.infoImages.join(',')
			}
			if(this.pageImages.length !=''){
				this.infoForm.pageImages = this.pageImages.join(',')
			}
			if(this.map4Video.length){
				this.infoForm.after_video = this.map4Video.join(',')
			}
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$http(this.$ApiList.AddAfterSale, this.infoForm).then(res => {
						this.$router.push({ path: '/after_sale_list' });
					});
					
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		onInputUpdate(){
			this.$forceUpdate();
		},
	},
	created() {
		
	},
	mounted () {
		if(this.$route.query.rec_id){
			this.infoForm.rec_id = this.$route.query.rec_id;
			this.isRec = true;
		}
		
	}
};
</script>
<style lang="scss">
.etit-after-sale {
	.last {
		margin-bottom: 0;
	}
	.upload-drag {
		.el-upload {
			vertical-align: top;
		}
		.el-upload__tip {
			line-height: normal;
		}
	}
	.case_upload {
		display: flex;
		flex-wrap: wrap;
		.el-col {
		}
	}
	.el-select {
		display: block;
	}
	.upload-box {
		padding-left: 40px;
		.case-img-upload {
			display: flex;
			.case-img-upload-imgs {
				flex: 1;
				align-items: flex-start;
				.el-image {
					width: 140px;
					height: 140px;
					border: solid 1px #e5e5e5;
					margin-left: 25px;
					vertical-align: top;
				}
				.avatar{
					margin-left: 25px;
					width: 138px;
					height: 138px;
				}
			}
			.case-img-upload-imgs-info {
				width: 100%;
				max-width: 660px;
				border: solid 1px #e5e5e5;
				margin-left: 25px;
				min-height: 390px;
				.case-img-upload-imgs-info-box {
					position: relative;
					.el-icon-error {
						position: absolute;
						font-size: 20px;
						color: #ef3030;
						right: 5px;
						top: 5px;
						z-index: 1;
						background-color: #fff;
						border-radius: 50%;
						cursor: pointer;
					}
				}
				.el-image {
					width: 100%;
					vertical-align: top;
				}
			}
			.vice_big_box {
				position: relative;
				display: inline-block;
				vertical-align: top;
				margin-bottom: 20px;
				.el-icon-error {
					position: absolute;
					font-size: 20px;
					color: #ef3030;
					right: 5px;
					top: 5px;
					z-index: 1;
					background-color: #fff;
					border-radius: 50%;
					cursor: pointer;
				}
			}
		}
		.el-upload__tip {
			width: 80px;
			text-align: center;
		}
		.el-form-item__label {
			float: none;
		}
		.el-form-item__content {
			margin-left: 0 !important;
			.el-button--danger {
				width: 80px;
				background-color: #37c1d6;
				border-color: #37c1d6;
			}
		}
	}
}
.progress{
		.progress-list{
			border: 1px solid #ccc;
			.list-item{
				display: flex;
				border-bottom: 1px solid #ccc;
				&:last-child{
					border-bottom: none;
				}
				.item-left{
					padding: 5px 0;
					width: 120px;
					text-align:center;
					border-right: 1px solid #ccc;
				}
				.item-right{
					padding: 5px 0;
					margin-left: 10px;
					flex: 1;
					display: flex;
					i{
						margin: 0 10px;
						line-height: 40px;
					}
				}
			}
			.item-push{
				height: 40px;
				text-align: center;
				i{
					margin-top: 3px;
					width: 34px;
					height: 34px;
					line-height: 34px;
					text-align: center;
					font-size: 28px;
					color: #fff;
					background-color: #000;
					border-radius: 50%;
				}
			}
		}
	}
</style>
